<template>
	<view >
		<view class="pl20 pr20 v100 overauto"
			:style="{ backgroundImage: 'url(' + cosImageUrl('head_bg.png',true) + ')'}">
			<view class="" :style="{'paddingTop':statusBarHeigh + 'px',}">
				<view class="flex alicen pl20" :style="{'height':menuButtonInfo.height + 'px',}">
					<u-icon name="arrow-left" color="#070707" size="18" @click="goback()"></u-icon>
				</view>
			</view>
			<view class="pb30"></view>
			<view class="txtcen">
				<image class="h120" :src="cosImageUrl('onkey.png',true)" mode="widthFix"></image>
				<view class="fz28">可根据自身意愿，选择合适的大学</view>
			</view>
			<view class="pb30"></view>
			<view class="pt20 pb20 pl30 pr30 ius20 bgf7f9ff">
				<view class="flex alicen between pb20 bdr1_bottom bored">
					<view class="fz30">高考成绩</view>
					<view class="flex alicen fz28">
						<view class="">广西</view>
						<view class="ml10 mr10">{{model1.grade}}分</view>
						<view class="fz32">{{model1.sxkm||'--'}}/{{model1.zxkm||'--'}}</view>
					</view>
				</view>
				<view class="pb30"></view>
				<view class="fz28 bold">设置您的个人偏好</view>
				<view class="flex alicen fz24 mt20 mb20">
					<view class="flex1 bgfff pt30 pb30 ius10 flexCenter pl10 pr10" @click="subsectionChange(arrName)">
						{{joinValues(arrName, 'name')||'意向城市'}}
					</view>
					<view class="flex1 ml20 bgfff pt30 pb30 ius10 pl10 pr10 flexCenter" @click.stop="selectMajor()">
						{{joinValues(arr, 'sname')||'意向专业'}}
					</view>
				</view>
				<view class="pb20"></view>
				<view class="h120 w100b fz32 flexCenter ius10 colff bg0055ff" @tap.stop="exclusive()">一键生成志愿表</view>
				<view class="pb20"></view>
				<view class="txtcen">
					<view class="fz24">可免费使用 <text class="col359eff">10</text>次,开通VIP <text
							class="col359eff">无限使用</text> >
					</view>
				</view>
			</view>
			<view class="pb30"></view>
			<view class="pt20 pb20 pl30 pr30 ius20 bgf7f9ff">
				<view class="fz32 bold">推荐原理及说明</view>
				<view class="pb30"></view>
				<view class="">
					<view class="fz24">
						1、当前的一键填报以广西考试院公布的《2024年高考指南的招生计划篇》为蓝本，采用成熟的新高考预测模型。结合2021-2023年各院校在广西省录取的所有数据，依据考生设置的专业及省份选择,科学的给出各院校专业组的投档概率及专业录取概率。当前填报仅为模拟并不代表最终方案。
					</view>
					<view class="fz24">
						2、以 2024 年招生计划为模拟数据,仅供模拟参考,考试院将于2025 年6月发布招生计划,届时本系统将同步更新上线。
					</view>
					<view class="fz24">
						3、本系统只提供“本科普通类”1个批次的一键生成模拟功能,在正式填报时,以广西考试院公布的最新招生计划为准,并要在广西考试院的官网进行填报。
					</view>
					<view class="fz24">
						4、非会员考生每天可免费修改十次分数进行一键模拟填报。
					</view>

				</view>
			</view>
		</view>
		<com-popup :showPop="provinceShow" @popStatus="provinceStatus">
			<view class="pt30 pl20 pb20 pr20">
				<view class="fz24 mt10 mb10 ">省份 <text class="fz20 col33">(多选)</text></view>
				<scroll-view scroll-y="true" class="selectH">
					<view class="alicen flex_wrap">
						<view class="relative w27b mb10 ml10 mr10 ius10  flexCenter fz24 pt10 pb10 pl10 pr10"
							v-for="(item,index) in popList" :key="index" @click="selected(item,index)"
							:class="isItemHighlighted(item)?'col40 bgfff bold border1 borf84746':'border1  bold boree  bgf7' ">
							<view class="">
								{{item.name}}
							</view>
							<image class="absolute b0 r0 w20 h20"
								:src="isItemHighlighted(item)?cosUrl+'check_icon.png':''  " mode="aspectFill"></image>
						</view>
					</view>
				</scroll-view>
				<view class="flex alicen">
					<view @click="reset()" class="pt20 pb20 border1 fz28 borf84746 flex1 ius100 col40 flexCenter">重置
					</view>
					<view @click="submit()" class="flex2 ml20 flexCenter ml20 mr20 ius100 pt20 pb20 bgff000 colff fz28">
						确定</view>
				</view>

			</view>
		</com-popup>
		<com-popup :showPop="majorShow" @popStatus="popStatus">
			<view class="pt20 pl20 pr20 flex alicen column between">
				<view class="flex alicen w100b between">
					<view class="fz28">意向地区排序</view>
					<view class="fz28 flex alicen" v-if="edit">
						<view class="" @tap.stop="deledit()">删除</view>
						<view class=" ml10" @tap.stop="close()">取消</view>
					</view>
					<view class="fz28" v-else @tap.stop="editBtn(arr)">编辑</view>
				</view>
				<scroll-view scroll-y="true" class="h498 overauto" @scrolltolower="lowermore">
					<view class="flex alicen between" v-for="(item1,index1) in list" :key="index1"
						@tap.stop="selectItem(item1)">
						<view class="flex alicen">
							<view>{{index1+1}}</view>
							<view class="ml30">{{item1.sname||'--'}}</view>
						</view>
						<image v-if="edit" class="w30 h30"
							:src="arr.includes(item1)?cosImageUrl('check.png',true):cosImageUrl('nocheck.png',true)"
							mode="aspectFill"></image>
					</view>
				</scroll-view>
				<view class="mb20  w100b bgfff">
					<view class="flex">
						<view class="flex1 ml20 mr20 bgff000 colff pt20 pb20 ius100 col00 fz30 flexCenter"
							@click.stop="submitMajor()">确定</view>
						<view @tap="gosearch()"
							class="flex1 ml20 mr20 bgff000 colff pt20 pb20 ius100 col00 fz30 flexCenter">
							添加专业</view>
					</view>

				</view>
			</view>
		</com-popup>
	</view>
</template>

<script>
	import {
		province_list,
		school_level,
		school_types
	} from "@/utils/api/dict.js"
	export default {
		data() {
			return {
				provinceName: '',
				model1: {},
				majorShow: false,
				provinceShow: false,
				list: [], //选择专业的数组
				edit: false, //编辑的变量
				arr: [], //判断是否删除数据的数组
				arr2: [],
				flag: false,
				arrName: [],
				newArr: [], //选择完的省份名称
				popList: [],
				Hsystem:uni.getSystemInfoSync().screenHeight,
				popObj: {
					popTypeName: "",
					popTypeValue: "",
					showRightPop: false,
					popTitle: "",
					typesign: '', //自定义标识
					popList: [],
					isLoad: {}
				},
			}
		},
		
		computed: {
			//省份
			province() {
				return this.$store.state.province
			},
			majorprovinceName() {
				return this.$store.state.majorprovinceName
			},
		},
		onShow() {
			let arr1 = this.readData('majorArr');
			if (arr1.length > 0) {
				this.arr = this.readData('majorArr');
			} else {
				this.arr = []
			}
			let provinceNameArr = this.readData('majorprovinceName');
			if (provinceNameArr.length > 0) {
				this.arrName = this.readData('majorprovinceName');
			} else {
				this.arrName = []
			}
			this.userInfo(); //用户信息
			this.majorShow = false
			this.provinceShow = false
		},
		methods: {
			lowermore() {
				console.log('触底函数')
			},
			submit() {
				this.provinceStatus();
			},
			reset() {
				this.arrName = []
			},
			// 判断当前项是否在 highlightItems 中
			isItemHighlighted(item) {
				return this.arrName.some(highlightedItem => highlightedItem.value == item.value);
			},
			selected(item, index) {
				let a1 = this.arrName.includes(item)
				if (!a1) {
					this.arrName.push(item)
				}
				if (a1) {
					this.arrName = this.arrName.filter(item1 => item1.value != item.value);
				}
			},
			//保存地区接口
			 async provinceStatus() {
				// console.log('保存省份',this.joinValues(this.arrName, 'value'))
				let params = {
					userId: this.readData('useId'),
					stype: 'province',
					scode:this.joinValues(this.arrName, 'value')
				}
				let adres = await this.request.get('/api/addMemberSetting', {
					params
				})
				if (adres.code == 200) {
					this.successToShow(adres.msg || '保存成功', call => {
						this.provinceShow = false
					})
				}
			},
			popStatus() {
				this.majorShow = false
			},
			async userInfo() {
				let params = {
					useId: this.readData('useId')
				}
				let info = await this.request.get('/api/loginMemberById', {
					params
				})
				if (info.code == 200) {
					this.model1 = info.data
					this.saveData('useId', info.data.id)
					this.saveData('userdata', info.data)
				}
			},
			subsectionChange(arr) {
				this.popObj.popTypeName = "省份"
				this.popObj.popTypeValue = "可多选"
				this.popObj.typesign = "S" //自定义标识
				province_list({
					scrollstr: true
				}).then(res => {
					let temp = []
					res.map((item) => {
						let obj = {
							name: item.name,
							value: item.id
						}
						temp.push(obj)
					})
					this.popList = temp
					this.provinceShow = true
				})
			},
			submitPop(item) {
				this.saveData('majorprovinceName', item.val)
				this.arrName = item.val
				// let majorprovinceName = this.mitprovince(item.val, 'name')
				// let province = this.mitprovince(item.val, 'value')
				// this.$store.commit('probtn', province)
				// this.$store.commit('majorBtn', majorprovinceName)
				this.popObj.popTypeName = null
				this.popObj.popTypeValue = null
				this.popObj.popTitle = null
				this.popObj.popList = []
				this.popObj.isLoad = {}
				this.popObj.showRightPop = false
			},
			exclusive() {
				this.deleteData('pcid')
				this.navgateTo('/pages/generate/exclusive');
			},
			async selectMajor() {
				let params = {
					userId: this.readData('useId')
				}
				let mem = await this.request.get('/api/queryMemberSetting', {
					params
				})
				if (mem.code == 200) {
					this.list = this.filterArr(mem.data)
				}
				this.edit = false
				this.majorShow = true

			},
			editBtn(arr = []) {
				this.saveData('majorArr', arr)
				this.list = this.mapArray(this.list, arr);
				console.log('arrarr', arr)
				console.log('arrarr1', this.list)
				this.edit = true

			},
			filterArr(arr) {
				return arr.filter(item => item.stype == 'major');
			},
			gosearch() {
				this.navgateTo('/pages/generate/search', {
					idx: 'major'
				})
				
			},
			selectItem(item) {
				if (!this.edit) return;
				let a1 = this.arr.includes(item)
				if (!a1) {
					this.arr.push(item)
				}
				if (a1) {
					this.arr = this.arr.filter(item1 => item1 != item);
				}
			},
			close() {
				this.edit = false
				// this.arr = []
			},
			//删除专业
			async deledit() {
				if (!this.arr.length) return this.showMsg('请选择专业');
				let params = {
					userId: this.readData('useId'),
					stype: 'major',
					scode: this.joinValues(this.arr, 'scode')
				}
				let adres = await this.request.get('/api/delMemberSetting', {
					params
				})
				if (adres.code == 200) {
					this.successToShow(adres.msg || '删除成功', call => {
						this.arr = []
						this.edit = false
						this.selectMajor();
					})
				}
			},
			submitMajor() {
				console.log('数组', this.arr)
				this.majorName = this.arr
				// this.edit = false
				this.majorShow = false
			},

		}
	}
</script>

<style lang="scss">
	.calc150 {
		height: calc(100vh - 150rpx)
	}
</style>